"use client";

import React from "react";
import {Button, Input, Checkbox, Link} from "@nextui-org/react";
import {Icon} from "@iconify/react";
import DefaultLayout from "@/layouts/default.tsx";

export default function LoginPage() {
    const [isVisible, setIsVisible] = React.useState(false);

    const toggleVisibility = () => setIsVisible(!isVisible);

    return (
        <DefaultLayout>
            <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
                <div className="inline-block max-w-lg text-center justify-center">
                    <div className="flex h-full w-full items-center justify-center">
                        <div className="flex w-full max-w-sm flex-col gap-4 rounded-large px-8 pb-10 pt-6">
                            <p className="pb-4 text-left text-3xl font-semibold">
                                登录
                                <span aria-label="emoji" className="ml-2" role="img">
            👋
          </span>
                            </p>
                            <form className="flex flex-col gap-4" onSubmit={(e) => e.preventDefault()}>
                                <Input
                                    label="邮箱"
                                    labelPlacement="outside"
                                    name="email"
                                    placeholder="请输入您的邮箱"
                                    type="email"
                                    variant="bordered"
                                />
                                <Input
                                    endContent={
                                        <button type="button" onClick={toggleVisibility}>
                                            {isVisible ? (
                                                <Icon
                                                    className="pointer-events-none text-2xl text-default-400"
                                                    icon="solar:eye-closed-linear"
                                                />
                                            ) : (
                                                <Icon
                                                    className="pointer-events-none text-2xl text-default-400"
                                                    icon="solar:eye-bold"
                                                />
                                            )}
                                        </button>
                                    }
                                    label="密码"
                                    labelPlacement="outside"
                                    name="password"
                                    placeholder="请输入您的密码"
                                    type={isVisible ? "text" : "password"}
                                    variant="bordered"
                                />
                                <div className="flex items-center justify-between px-1 py-2">
                                    <Checkbox defaultSelected name="remember" size="sm">
                                        记住我
                                    </Checkbox>
                                    <Link className="text-default-500" href="#" size="sm">
                                        忘记密码?
                                    </Link>
                                </div>
                                <Button color="primary" type="submit">
                                    登录
                                </Button>
                            </form>
                            <p className="text-center text-small">
                                <Link href="/register" size="sm">
                                    创建账号
                                </Link>
                            </p>
                        </div>
                    </div>
                </div>
            </section>
        </DefaultLayout>
    );
}
